<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        import React, { Component } from 'react';
        import {
                AppRegistry,
                StyleSheet,
                Text,
                View,
                Image
        } from 'react-native';

        class Blink extends Component {
            constructor(props) {
                super(props);
                this.state = { showText: true };
                // 每1000毫秒对showText状态做一次取反操作
                setInterval(() => {
                    this.setState({ showText: !this.state.showText });
                }, 1000);
            }

            render() {
                // 根据当前showText的值决定是否显示text内容
                let display = this.state.showText ? this.props.text : '改变了';
                return (
                        <Text style={{backgroundColor:'red',width: 193, height: 30,textAlign:'center',lineHeight:30,marginBottom:10}} >{display}</Text>
                );
            }
        }

        export default class testRN extends Component {
            render() {
                let pic = {
                    uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
                };
                return (
                        <View style={styles.container}>
                            <Text style={styles.welcome}>
                                Welcome to testRN!
                            </Text>
                            <Blink text='I love to blink'/>

                            <Image source={pic} style={{width: 193, height: 110,marginBottom:10}} />
                            <Image source={require('./img/1234.jpeg')} style={{marginBottom:10}}/>
                            <Image source={{uri:'community_head'}} style={{width:40,height:40}}/>
                        </View>
                );
            }
        }

        const styles = StyleSheet.create({
            container: {
                flex: 1,
                justifyContent: 'center',
                alignItems: 'center',
                backgroundColor: '#F5FCFF',
            },
            welcome: {
                fontSize: 20,
                textAlign: 'center',
                margin: 10,
            },
            instructions: {
                textAlign: 'center',
                color: '#333333',
                marginBottom: 5,
            },
            red: {
                color: 'red',
                flex:1,
            },
        });

        AppRegistry.registerComponent('testRN', () => testRN);
    </script>
</head>
<body>

</body>
</html>